<div class="clr-row" *ngIf="res">
  <div class="clr-col-sm-12 clr-col-md-8">
    <h4>
      模块:
      <app-formatted-quantity
        [quantity]="used"
        [integer]="true"
        [ngClass]="{ 'text-danger': !isValid }"
      ></app-formatted-quantity>
      /
      <app-formatted-quantity
        [quantity]="res.modStack.maxPoints"
        [integer]="true"
      ></app-formatted-quantity>
    </h4>

    <form clrForm clrLayout="compact">
      <ng-container *ngFor="let m of res.modStack.mods; trackBy: modID">
        <clr-input-container>
          <label class="clr-col-12 clr-col-md-8">{{ m.name }}</label>

          <input
            class="clr-col-12 clr-col-md-4"
            type="number"
            clrInput
            [min]="getMin(m)"
            [max]="getMax(m)"
            [name]="'slr-n' + res.id + m.id"
            [(ngModel)]="m.quantity_ui"
            [ngClass]="{
              'text-danger': m.quantity_ui < 0,
              'text-success': m.quantity_ui > 0
            }"
          />
        </clr-input-container>

        <input
          type="range"
          [name]="'slr' + res.id + m.id"
          [min]="getMin(m)"
          [max]="getMax(m)"
          step="1"
          [(ngModel)]="m.quantity_ui"
          (ngModelChange)="reload()"
        />
      </ng-container>
    </form>

    <br />

    <clr-alert [clrAlertType]="'warning'" [clrAlertClosable]="false">
      <clr-alert-item>
        <span class="alert-text">
          保存所有 {{ res.name }} （除了一个）其它的将被销毁！
        </span></clr-alert-item
      >
    </clr-alert>
    <br />

    <div class="btn-group btn-primary">
      <button class="btn" (click)="save()" [disabled]="!isValid">
        <clr-icon shape="floppy"></clr-icon>保存
      </button>
      <button class="btn btn-success" (click)="cancel()">
        <clr-icon shape="undo"></clr-icon>取消
      </button>
    </div>
  </div>
  <div class="clr-col-sm-12 clr-col-md-4">
    <table class="table table-noborder table-compact mod-recap">
      <thead>
        <tr>
          <th class="left">模块</th>
          <th>当前</th>
          <th>新</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let m of res.modStack.mods; trackBy: modID">
          <td class="left">
            {{ m.description }}
            <a
              role="tooltip"
              aria-haspopup="true"
              class="tooltip tooltip-md tooltip-top-left"
            >
              <clr-icon shape="info-circle" size="24"></clr-icon>
              <span class="tooltip-content">{{ m.tooltip }}</span>
            </a>
          </td>
          <td class="monospace">
            {{ m.getBonus(m.quantity) }}
          </td>
          <td
            class="monospace"
            [ngClass]="{
              'text-danger': m.quantity_ui < m.quantity,
              'text-success': m.quantity_ui > m.quantity
            }"
          >
            {{ m.getBonus(m.quantity_ui) }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
